<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/602498 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="515"/>

<div>
<span><div><div><div><font style="font-size: 16pt;">jQuery</font></div><div>介绍：</div><ol><li><div>创始人：John Resig（约翰·莱西格）</div></li><li><div>时间：2006</div></li><li><div>设计思想： write less,do more</div></li></ol><div>jQuery作用</div><ol><li><div>访问和操作DOM元素</div></li><li><div>控制页面样式</div></li><li><div>对页面事件进行处理</div></li><li><div>扩展新的jQuery插件</div></li><li><div>与Ajax技术完美结合</div></li></ol><div>注意：使用jQuery能大幅提高开发效率相对于js而言</div><div>优势：</div><ol><li><div>体积小，压缩后只有100KB左右</div></li><li><div>强大的选择器</div></li><li><div>出色的DOM封装</div></li><li><div>可靠的事件处理机制</div></li><li><div>出色的浏览器兼容性</div></li></ol><div>jquery使用：在页面中引入js（jQuery是一个单独存在的js文件，不会与其他js文件发生冲突）</div><div><br/></div><div>基本语法：</div><div>说明：</div><ol><li><div>工厂函数 $() ：将DOM对象转化为jQuery对象</div></li><li><div>选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ）</div></li><li><div>方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”</div></li></ol><div><br/></div><div>jQuery对象与DOM对象：</div><ol><li><div>DOM对象和jQuery对象分别拥有一套独立的方法，不能混用 。 想混用，要转换</div></li></ol><div>选择器：</div><div>基本选择器： 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器</div><ol><li><div>标签选择器 ： element  -&gt;根据给定的标签名匹配元素 $(&quot;h2&quot; )  eg: 选取所有h2元素</div></li><li><div>类选择器:   .class -&gt;根据给定的class匹配元素   eg: $(&quot; .title&quot;)选取所有class 为title的元素</div></li><li><div>ID选择器:    #id 根据给定的id匹配元素  eg:  $(&quot; #title&quot;)选取id为title的 元素</div></li><li><div>并集选择器： selector1,selector2,...,selectorN -&gt;将每一个选择器匹配的元素合并后一起返回  eg:   $(&quot;div,p,.title&quot; )选取所有 div、p和拥有class为title 的元素</div></li><li><div>交集选择器:  element.class或element#id -&gt; 匹配指定class或id的某元素或元素集合  eg:  $(&quot;h2.title&quot;)选取所有拥有 class为title的h2元素</div></li></ol><div>层次选择器：</div><ol><li><div>后代选择器： ancestor descendant  -&gt; 选取ancestor元素里的所有 descendan(后代元素)  eg:  $(&quot;#menu span&quot; )选取 #menu下的元素</div></li><li><div>子选择器:  parent&gt;child  -&gt; 选取parent元素下的child（子）元素    eg:   $(&quot; #menu&gt;span&quot; )选取 #menu的子元素</div></li><li><div>相邻元素选择器:   prev+next  -&gt; 选取紧邻prev元素之后的next元 素 eg: 元素之后的同 辈元素</div></li><li><div>同辈元素选择器:  prev~sibings  -&gt; 选取prev元素之后的所有siblings 元素  eg:  元素之后所有 的同辈元素</div></li></ol><div><br/></div><div>属性选择器：</div><div>属性选择器：  [attribute]  -&gt;  选取包含给定属性的元素  eg:   $(&quot; [href]&quot; )选取含有href属性的元 素</div><div><br/></div><div>过滤选择器： :</div><ol><li><div>:first  选取第一个元素</div></li><li><div>:last  选取最后一个元素</div></li><li><div>:even  选取索引是偶数的所有元素（index从0开 始）</div></li><li><div>:odd 选取索引是奇数的所有元素（index从0开 始）</div></li><li><div>:eq(index) 选取索引等于index的元素（index从0开 始）</div></li><li><div>:gt(index) 选取索引大于index的元素（index从0开 始）</div></li><li><div>:lt(index) 选取索引小于index的元素（index从0开 始）</div></li></ol></div><div><br/></div><div>事件：</div><div>鼠标事件： 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件<br/></div><div>常用鼠标事件有：</div><ol><li><div>click( )  -&gt;  触发或将函数绑定到指定元素的click事件  -&gt;   单击鼠标时</div></li><li><div>mouseover( )   -&gt;  触发或将函数绑定到指定元素的mouse over事件  -&gt;   鼠标移过时</div></li><li><div>mouseout( )    -&gt;   触发或将函数绑定到指定元素的mouse out事件  -&gt;   鼠标移出时</div></li></ol><div>表单事件: 当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件</div><div>常用表单事件：</div><ol><li><div>focus( ) -&gt;   触发或将函数绑定到指定元素的focus事件 -&gt; 获得焦点</div></li><li><div>blur( )   -&gt; 触发或将函数绑定到指定元素的blur事件 -&gt;  失去焦点</div></li></ol><div><br/></div><div>鼠标悬停复合事件： hover()方法相当于mouseover与mouseout事件的组合</div><div>连续点击符合事件： toggle()除了可以模拟鼠标的连续单击事件</div><div><br/></div><div>元素的隐藏和显示：</div><div>改变元素的宽和高（带动画效果）方法：</div><ol><li><div>show( speed )：显示</div></li><li><div>hide( speed )：隐藏</div></li><li><div>toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示</div></li></ol><div>注意： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：&quot;slow&quot;、&quot;fast&quot; 或毫秒</div><div>改变元素的高（拉伸效果） 方法：</div><ol><li><div>slideDown( speed ) ：显示</div></li><li><div>slideUp( speed )：隐藏</div></li><li><div>slideToggle( speed )等价于slideDown+slideUp</div></li></ol><div>注意： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：&quot;slow&quot;、&quot;fast&quot; 或毫秒</div><div>不改变元素的大小（淡入淡出效果） 方法：</div><ol><li><div>fadeIn( speed ) 显示</div></li><li><div>fadeOut( speed ) 隐藏</div></li><li><div>fadeToggle( speed ) 等价于fadeIn+fadeOut动画</div></li><li><div>fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）</div></li></ol><div>注意： 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：&quot;slow&quot;、&quot;fast&quot; 或毫秒</div><div><br/></div><div>链： 链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；</div><div><br/></div><div>DOM和CSS的操作</div><div>属性函数：</div><ol><li><div>attr( &quot;属性&quot; ); 获得元素的属性值 <br/></div></li></ol><div>           attr( &quot;属性&quot; , &quot;新值&quot; ); 修改元素的属性值 </div><div>           attr( 样式参数 ) ：样式参数可以写成json格式</div><ol start="2"><li><div>val() ; 获得表单元素中的value值</div></li></ol><div>                     val(&quot;x&quot;) 修改表单元素中的value值</div><ol start="3"><li><div>html(); 获得元素中的内容（标签+文本）</div></li></ol><div>                      html(&quot;x&quot;) 修改元素中的内容（标签+文本）</div><ol start="4"><li><div>text(); 获得元素中的文本</div></li></ol><div>                       text(&quot;x&quot;) 修改元素中的文本</div><div><br/></div><div>样式函数</div><ol><li><div>css( &quot;属性&quot;); 获得该属性值</div></li><li><div>css( &quot;属性&quot;,&quot;值&quot;); 设置属性的值</div></li><li><div>css( { json} ); 设置多个属性的值</div></li></ol><div>类样式函数：</div><ol><li><div>addClass(); 为元素添加类样式</div></li><li><div>removeClass(); 将元素的类样式移除</div></li><li><div>toggleClass(); 样式的切换（有-&gt;无，无-&gt;有）</div></li></ol><div>节点操作</div><ol><li><div>创建节点： 工厂函数$()用于获取或创建节点</div></li><li><div>插入节点： 插入子节点</div></li></ol><div>语法：</div><ol><li><div>append(content)      $(A).append(B)表示将B追加到A中</div></li><li><div>appendTo(content)   $(A).appendTo(B)表示把A追加到B中</div></li><li><div>prepend(content)      $(A). prepend (B)表示将B前置插入到A中</div></li><li><div>prependTo(content)   $(A). prependTo (B)表示将A前置插入到B中</div></li></ol><div>插入同辈节点语法：</div><ol><li><div>after(content)      $(A).after (B)表示将B插入到A之后</div></li><li><div>insertAfter(content)     $(A). insertAfter (B)表示将A插入到B之后</div></li><li><div>before(content)           $(A). before (B)表示将B插入至A之前</div></li><li><div>insertBefore(content)   $(A). insertBefore (B)表示将A插入到B之前</div></li></ol><div>替换节点方法</div><ol><li><div>replaceWith()</div></li><li><div>replaceAll()</div></li></ol><div>复制节点：</div><ol><li><div>clone()</div></li></ol><div>删除节点：<br/><span>    </span><span>    </span>1.  remove()删除整个节点</div><div>        2.  empty()清空节点内容</div><div><br/></div><div>遍历节点：</div><div>祖先元素：</div><div>用于向上遍历 DOM 树的方法：</div><ol><li><div>parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）</div></li><li><div>parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分</div></li></ol><div>同辈元素</div><ol><li><div>next() 获取紧邻匹配元素之后的元素</div></li><li><div>prev() 获取紧邻匹配元素之前的元素</div></li><li><div>siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素</div></li></ol><div>后代元素（自己的血亲就是自己的后代 无论是否隔代）</div><ol><li><div>children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”</div></li><li><div>find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。</div></li></ol><div>元素的过滤：</div><ol><li><div>first()：过滤第一个元素</div></li><li><div>last()：过滤最后一个元素</div></li><li><div>eq(index)：过滤到下标为index的元素</div></li><li><div>not()：除了什么之外的元素</div></li><li><div>is()：返回布尔，判断是不是这种元素</div></li></ol><div><br/></div><div><font style="font-size: 16pt;">ECMAScript详解（es6）</font></div><div>ECMAScript6 简介: JavaScript 语言的下一代标准 目标是: 使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言</div><div><br/></div><div><br/></div><div>NPM环境：</div><div>什么是NPM环境：</div><ol><li><div>NPM全称Node Package Manager，是Node.js包管理工具</div></li><li><div>是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前 端的Maven</div></li><li><div>如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处 是广告和病毒</div></li><li><div>js文件统一放在一个仓库里  需要时就用</div></li></ol><div><br/></div><div>ES6基本语法： ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对 象、内建函数等通用语法。</div><ol><li><div>let声明变量：与js中var声明变量的区别</div></li><ol><ol><ol><ol><ol><ol><li><div>作用域不同</div></li><li><div>声明次数不同</div></li><li><div>声明与使用顺序不同</div></li></ol></ol></ol></ol></ol></ol></ol><div>       2. const声明常量（ const 声明常量,为只读变量   1. 一旦声明之后，其值是不允许改变的  2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const <span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span>declaration（语法错 误，声明常量丢失了初始化））</div><div><br/></div><div>解构赋值：</div><ol><li><div>解构赋值是对赋值运算符的扩展</div></li><li><div>它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值</div></li><li><div>解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取</div></li><li><div>在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。</div></li></ol><div>模板字符串：</div><ol><li><div>模板字符串相当于加强版的字符串</div></li><li><div>用反引号 `,除了作为普通字符串，还可以用来定义多行字符串</div></li><li><div>还可以在字符串中加入变量和表达式。</div></li></ol><div>模块化： 如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？ java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程 将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块 每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。</div><div><br/></div><div>ES6的模块用法中<span style="color: unset; font-family: unset; font-size: unset;">如果不想暴露模块当中的变量名字，用as</span></div><div><br/></div><div>默认导出： 可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出</div><div><br/></div><div><br/></div><div><font style="font-size: 16pt;">Bootstrap</font></div><div>什么是Bootstrap？</div><ol><li><div>Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。</div></li><li><div>Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。</div></li></ol><div>响应式设计： Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。</div><div><br/></div><div>Bootstrap的使用</div><div>表格标签：<br/><span>       </span>1.  &lt;table&gt;为表格添加基础样式</div><ol start="2"><li><div>&lt;thread&gt; 表格标题行的容器元素(&lt;tr&gt;)</div></li><li><div>&lt;tbody&gt;  表格主体中的表格行的容器元素(&lt;tr&gt;)</div></li><li><div>&lt;tr &gt;  表格行</div></li><li><div>&lt;td&gt;默认的表格单元格。</div></li><li><div>&lt;th&gt;  &gt; 特殊的表格单元格，（居中和加粗的效果）。必须在&lt;thread&gt;中使用</div></li><li><div>&lt;caption&gt;  关于表格存储内容的描述或总结。</div></li></ol><div>好看的类样式：</div><ol><li><div>.table 为任意&lt;table&gt;添加基本样式 (只有横向分隔线)</div></li><li><div>.table-striped 在&lt;tbody&gt; 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色</div></li><li><div>.table-bordered 为所有表格的单元格添加边框</div></li><li><div>.table-hover 在&lt;tbody&gt; 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示</div></li><li><div>.table-condensed 让表格更加紧凑</div></li></ol><div>情景色类样式： 适合应用在&lt;th&gt;,&lt;tr&gt;,&lt;td&gt;</div><ol><li><div>.active 激活效果（悬停颜色）</div></li><li><div>.success 表示成功或积极的动作</div></li><li><div>.info 表示普通的提示信息或动作</div></li><li><div>.warning 表示警告或需要用户注意</div></li><li><div>.danger 表示危险或潜在的带来的负面影响的动作</div></li></ol><div>响应式表格： 表格的父元素设置响应式，小于768px，出现边框</div><div><font style="font-size: 10pt;">表单</font></div><div><font style="font-size: 10pt;">表单布局中的内联布局：</font> 让所有表单元素居于一行（ 注意：当小于768px时,会自动还原成移动端样式. ）</div><div><br/></div><div>复选框：</div><ol><li><div>checkbox 默认</div></li><li><div>checkbox-inline 内联</div></li></ol><div>下拉菜单组件的用法关键核心：</div><ol><li><div>外围容器使用 class=&quot;dropdown&quot;包裹</div></li><li><div>内部点击按钮事件绑定 data-toggle=&quot;dropdown&quot;</div></li><li><div>菜单元素使用 class=&quot;dropdown-menu&quot;</div></li></ol><div>栅格系统：</div><ol><li><div>bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子</div></li><li><div>当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果</div></li><ol><li><div>col-lg-3 当大屏幕时，一个div占3份，一行显示4个div</div></li><li><div>col-md-4 当中屏幕时，一个div占4份，一行显示3个div</div></li><li><div>col-sm-6 当小屏幕时，一个div占6份，一行显示2个div</div></li><li><div>超小屏幕时，一个div占12份，一行显示1个div，默认</div></li></ol></ol><div>模态框组件：</div><ol><li><div>data-toggle=&quot;modal&quot; 触发类型:模态框modal</div></li><li><div>data-target=&quot;#myModal&quot; 触发的节点</div></li><li><div>data-backdrop=&quot;static&quot; 点击黑灰色背景，不会关闭模态框</div></li></ol><div><br/></div></div></span>
</div></body></html> 